Factor out dynamic modal dialog creation into Utils.showDynamicModal().
Akinori MUSHA
3 changed files with 40 additions and 44 deletions
+ 21
- 0
app/assets/javascripts/components/utils.js.coffee
@@ -12,3 +12,24 @@ class @Utils |
||
| 12 | 12 |
window.currentPage = new klass() |
| 13 | 13 |
else |
| 14 | 14 |
new klass() |
| 15 |
+ |
|
| 16 |
+ @showDynamicModal: (content = '', { title, body, onHide } = {}) ->
|
|
| 17 |
+ $("body").append """
|
|
| 18 |
+ <div class="modal fade" tabindex="-1" id='dynamic-modal' role="dialog" aria-labelledby="dynamic-modal-label" aria-hidden="true"> |
|
| 19 |
+ <div class="modal-dialog modal-lg"> |
|
| 20 |
+ <div class="modal-content"> |
|
| 21 |
+ <div class="modal-header"> |
|
| 22 |
+ <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> |
|
| 23 |
+ <h4 class="modal-title" id="dynamic-modal-label"></h4> |
|
| 24 |
+ </div> |
|
| 25 |
+ <div class="modal-body">#{content}</div>
|
|
| 26 |
+ </div> |
|
| 27 |
+ </div> |
|
| 28 |
+ </div> |
|
| 29 |
+ """ |
|
| 30 |
+ modal = document.querySelector('#dynamic-modal')
|
|
| 31 |
+ $(modal).find('.modal-title').text(title || '').end().on 'hidden.bs.modal', ->
|
|
| 32 |
+ $('#dynamic-modal').remove()
|
|
| 33 |
+ onHide?() |
|
| 34 |
+ body?(modal.querySelector('.modal-body'))
|
|
| 35 |
+ $(modal).modal('show')
|
+ 15
- 28
app/assets/javascripts/pages/agent-edit-page.js.coffee
@@ -141,34 +141,21 @@ class @AgentEditPage |
||
| 141 | 141 |
.always => |
| 142 | 142 |
$("body").css(cursor: 'auto')
|
| 143 | 143 |
.done (json) => |
| 144 |
- $("body").append """
|
|
| 145 |
- <div class="modal fade" tabindex="-1" id='dynamic-modal' role="dialog" aria-labelledby="dynamic-modal-label" aria-hidden="true"> |
|
| 146 |
- <div class="modal-dialog modal-lg"> |
|
| 147 |
- <div class="modal-content"> |
|
| 148 |
- <div class="modal-header"> |
|
| 149 |
- <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> |
|
| 150 |
- <h4 class="modal-title" id="dynamic-modal-label"></h4> |
|
| 151 |
- </div> |
|
| 152 |
- <div class="modal-body"> |
|
| 153 |
- <h5>Log</h5> |
|
| 154 |
- <pre class="agent-dry-run-log"></pre> |
|
| 155 |
- <h5>Events</h5> |
|
| 156 |
- <pre class="agent-dry-run-events"></pre> |
|
| 157 |
- <h5>Memory</h5> |
|
| 158 |
- <pre class="agent-dry-run-memory"></pre> |
|
| 159 |
- </div> |
|
| 160 |
- </div> |
|
| 161 |
- </div> |
|
| 162 |
- </div> |
|
| 163 |
- """ |
|
| 164 |
- $('#dynamic-modal').find('.modal-title').text "Dry Run Results"
|
|
| 165 |
- $('#dynamic-modal').find('.modal-body').
|
|
| 166 |
- find('.agent-dry-run-log').text(json.log).end().
|
|
| 167 |
- find('.agent-dry-run-events').text(json.events).end().
|
|
| 168 |
- find('.agent-dry-run-memory').text(json.memory)
|
|
| 169 |
- $('#dynamic-modal').modal('show').on 'hidden.bs.modal', ->
|
|
| 170 |
- $('#dynamic-modal').remove()
|
|
| 171 |
- $(button).prop('disabled', false)
|
|
| 144 |
+ Utils.showDynamicModal """ |
|
| 145 |
+ <h5>Log</h5> |
|
| 146 |
+ <pre class="agent-dry-run-log"></pre> |
|
| 147 |
+ <h5>Events</h5> |
|
| 148 |
+ <pre class="agent-dry-run-events"></pre> |
|
| 149 |
+ <h5>Memory</h5> |
|
| 150 |
+ <pre class="agent-dry-run-memory"></pre> |
|
| 151 |
+ """, |
|
| 152 |
+ body: (body) -> |
|
| 153 |
+ $(body). |
|
| 154 |
+ find('.agent-dry-run-log').text(json.log).end().
|
|
| 155 |
+ find('.agent-dry-run-events').text(json.events).end().
|
|
| 156 |
+ find('.agent-dry-run-memory').text(json.memory)
|
|
| 157 |
+ title: 'Dry Run Results', |
|
| 158 |
+ onHide: -> $(button).prop('disabled', false)
|
|
| 172 | 159 |
.fail (xhr, status, error) -> |
| 173 | 160 |
alert('Error: ' + error)
|
| 174 | 161 |
$(button).prop('disabled', false)
|
+ 4
- 16
app/assets/javascripts/pages/agent-show-page.js.coffee
@@ -19,22 +19,10 @@ class @AgentShowPage |
||
| 19 | 19 |
$button = $(this) |
| 20 | 20 |
$button.on 'click', (e) -> |
| 21 | 21 |
e.preventDefault() |
| 22 |
- $("body").append """
|
|
| 23 |
- <div class="modal fade" tabindex="-1" id='dynamic-modal' role="dialog" aria-labelledby="dynamic-modal-label" aria-hidden="true"> |
|
| 24 |
- <div class="modal-dialog modal-lg"> |
|
| 25 |
- <div class="modal-content"> |
|
| 26 |
- <div class="modal-header"> |
|
| 27 |
- <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> |
|
| 28 |
- <h4 class="modal-title" id="dynamic-modal-label"></h4> |
|
| 29 |
- </div> |
|
| 30 |
- <div class="modal-body"><pre></pre></div> |
|
| 31 |
- </div> |
|
| 32 |
- </div> |
|
| 33 |
- </div> |
|
| 34 |
- """ |
|
| 35 |
- $('#dynamic-modal').find('.modal-title').text $button.data('modal-title')
|
|
| 36 |
- $('#dynamic-modal').find('.modal-body pre').text $button.data('modal-content')
|
|
| 37 |
- $('#dynamic-modal').modal('show').on 'hidden.bs.modal', -> $('#dynamic-modal').remove()
|
|
| 22 |
+ Utils.showDynamicModal '<pre></pre>', |
|
| 23 |
+ title: $button.data('modal-title'),
|
|
| 24 |
+ body: (body) -> |
|
| 25 |
+ $(body).find('pre').text $button.data('modal-content')
|
|
| 38 | 26 |
|
| 39 | 27 |
$("#logs .spinner").stop(true, true).fadeOut ->
|
| 40 | 28 |
$("#logs .refresh, #logs .clear").show()
|